import { createApp } from 'vue'

/**
 * 基础语法
 */
import AppVue3Basic from './AppVue3Basic.vue'
import GlobalHello from '@/components/GlobalHello.vue'

const app = createApp(AppVue3Basic)

app.component('GlobalHello', GlobalHello)

app.config.globalProperties.appVersion = '99.99.99'
declare module 'vue' {
  interface ComponentCustomProperties {
    appVersion: string
  }
}

app.directive('mystyle', (element, { value }) => {
  element.innerText += value
  element.style.color = 'green'
  element.style.backgroundColor = 'yellow'
})

app.mount('#app')

/**
 * 路由配置
 */
// import AppRoute from './AppRoute.vue'
// import router from './router'
// const app = createApp(AppRoute)
// app.use(router)
// app.mount('#app')

/**
 * 状态管理
 */
// import AppPinia from './AppPinia.vue'
// import { createPinia } from 'pinia'
// const app = createApp(AppPinia)
// const pinia = createPinia()
// app.use(pinia)
// app.mount('#app')



/**
 * 组件通信
 */
// import AppVue3Basic from './AppProps.vue'
// createApp(AppVue3Basic).mount('#app')


/**
 * 组件插槽
 */
// import AppSlot from './AppSlot.vue'
// createApp(AppSlot).mount('#app')


/**
 * 自定义Ref
 */
// import AppCustomRef from './AppCustomRef.vue'
// createApp(AppCustomRef).mount('#app')


/**
 * Teleport
 */
// import AppTeleport from './AppTeleport.vue'
// createApp(AppTeleport).mount('#app')


/**
 * Suspense
 */
// import AppSuspense from './AppSuspense.vue'
// createApp(AppSuspense).mount('#app')


